<template>
  <view class="container">
    <view class="container__body">
      <view class="container__body-form">
        <u-form ref="form" :rules="rules" :model="form" label-width="160rpx">
          <view class="container__body-form_section">
            <view class="container__body-form_section-body">
              <view class="container__body-form_section-body__item">
                <view class="container__body-form_section-body__item-content">
                  <u-form-item label-width="160rpx" label="房源" prop="premisesAddress" required
                               @click.stop="selectHouse">
                    <view @click.stop="selectHouse">
                      <u-input @click.stop="selectHouse" v-model="form.premisesAddress" type="text"
                               placeholder="请选择房源" suffixIcon="search" suffixIconStyle="color: #909399" readonly
                               disabled-color="#ffffff"></u-input>
                    </view>
                  </u-form-item>
                </view>
              </view>
            </view>
          </view>
          <view class="container__body-form_section">
            <view class="container__body-form_section-body">
              <view class="container__body-form_section-body__item" style="position: relative;">
                <view class="container__body-form_section-body__item-content">
                  <u-form-item label-width="160rpx" label="检查点" prop="processName" required>
                    <view @click="handleShowTree" v-if="!form.houseId"
                          style="position: absolute; z-index: 1;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;">
                    </view>
                    <hxk-tree-select ref="tree" :disabled="!form.houseId" v-model="processName" :treeData="treeData"
                                     separator="-" :selectParent="true" @change="handleTreeChange"></hxk-tree-select>
                  </u-form-item>
                </view>
              </view>
              <view class="container__body-form_section-body__item">
                <view class="container__body-form_section-body__item-content">
                  <u-form-item label-width="160rpx" label="状态" prop="facilitiesState" required>
                    <uni-data-checkbox v-model="form.facilitiesState"
                                       :localdata="[{text: '正常', value: '1'}, {text: '已损坏', value: '2'}]"></uni-data-checkbox>
                  </u-form-item>
                </view>
              </view>
              <view class="container__body-form_section-body__item">
                <view class="container__body-form_section-body__item-content">
                  <u-form-item label-width="160rpx" label="图片" prop="pictureSet" required>
                    <image-upload v-model="form.pictureSet" :max-count="6" :is-show-tip="true" :capture="'camera'" :show-water-mark="true" :water-mark-text="form.premisesAddress">
                      <template slot="tip">
                        <text class="tip-text">* 仅支持现场拍照，每次最多上传6张</text>
                      </template>
                    </image-upload>
                  </u-form-item>
                </view>
              </view>
            </view>
          </view>
          <view class="container__body-form_section">
            <view class="container__body-form_section-body">
              <view class="container__body-form_section-body__item">
                <view class="container__body-form_section-body__item-content">
                  <u-form-item label-width="160rpx" label="备注" prop="remark">
                    <u-textarea v-model="form.remark" placeholder="请输入接单备注"></u-textarea>
                  </u-form-item>
                </view>
              </view>
            </view>
          </view>
        </u-form>
      </view>
    </view>
    <view class="container__footer" :style="{paddingBottom: mixinBottomHight + 'px'}">
      <view class="container__footer__button">
        <button @click="handleCancel">取消</button>
        <button @click="handleSubmit" class="container__footer__button--submit">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
import {addDailyInspection, getCleaningProcessTree} from "@/api/manager/daily-inspection";

export default {
  data() {
    return {
      data: {},
      //流程树数据
      treeData: [],
      processName: "",
      //入住表单数据
      form: {
        houseId: "",//房屋id
        premisesAddress: "",//房间名称
        pictureSet: "",//图片集
        processName: "",//流程名称
        facilitiesState: "1",//设施状态：1.正常；2.已损坏
        remark: ""//备注
      },
      //表单验证规则
      rules: {
        premisesAddress: [
          {required: true, message: '请选择房源', trigger: 'change'}
        ],
        processName: [
          {required: true, message: '请选择检查点', trigger: 'change'}
        ],
        facilitiesState: [
          {required: true, message: '请选择状态', trigger: 'change'}
        ],
        pictureSet: [
          {required: true, message: '请上传图片', trigger: 'change'}
        ]
      }
    };
  },
  computed: {},
  onLoad(options) {
    if (options.data) {
      this.data = JSON.parse(options.data);
      if (this.data.orderId) {
        uni.setNavigationBarTitle({
          title: '预定变更'
        })
      }
      this.initData()
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules);
  },
  methods: {
    //初始化数据
    initData() {
      this.form = {
        houseId: "",//房屋id
        premisesAddress: "",//房间名称
        pictureSet: "",//图片集
        processName: "",//流程名称
        facilitiesState: "1",//设施状态：1.正常；2.已损坏
        remark: ""//备注
      }
    },
    // 选择房间
    selectHouse() {
      this.$tab.navigateTo({
        url: '/pages/manager/common/select-room?type=userHouseList',
        events: {
          selectHouseCallback: (result) => {
            console.log('选择房间回调', result)
            this.form.houseId = result.houseId
            this.form.premisesAddress = result.premisesAddress
            this.$forceUpdate()
            console.log(this.form)

            this.getTreeData()
          }
        }
      })
    },
    //获取流程树
    getTreeData() {
      let params = {
        houseId: this.form.houseId
      }
      getCleaningProcessTree(params).then(response => {
        this.treeData = response.data
      })
    },
    handleShowTree() {
      console.log('handleShowTree')
      if (!this.form.houseId) {
        this.$modal.msg('请先选择房源')
        return
      }

    },
    handleTreeChange(data, list) {
      this.form.processName = list.map(item => item.name).join('-')
    },
    //取消按钮
    handleCancel() {
      this.$tab.navigateBack();
    },
    //提交按钮
    handleSubmit() {
      this.$refs.form.validate().then(() => {
        console.log(this.form)
        let form = {...this.form}
        this.$modal.loading('提交中...')
        addDailyInspection(form).then(response => {
          this.$modal.msg(response.msg);
          let channel = this.getOpenerEventChannel()
          if (channel && channel.emit) {
            channel.emit('addCallback', response)
          }
          setTimeout(() => {
            this.$tab.navigateBack();
          }, 1000)
        }).catch((err) => {
          this.$modal.msg(err.msg || '提交失败')
        })
      }).catch((err) => {
        this.$modal.closeLoading()
        this.$modal.msg(err[0].message)
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .container__body {
    .container__body-form {
      .container__body-form_section {
        background-color: #FFFFFF;
        margin-bottom: 20rpx;
        padding: 20rpx;

        .container__body-form_section-header {

          .container__body-form_section-header__label {
            display: flex;
            align-items: center;

            .container__body-form_section-header__text {
              font-weight: 600;
              font-size: 32rpx;
              color: #000000;
              margin-left: 15rpx;
            }

            image {
              width: 30rpx;
              height: 30rpx;
            }
          }

          .container__body-form_section-header__content {
            padding: 20rpx;
            font-weight: 350;
            font-size: 30rpx;
            color: #AFAFAF;
            border-bottom: 1rpx solid #EBEBEB;

            .container__body-form_section-header__content__text {
            }
          }


        }

        .container__body-form_section-body {
          padding: 0 10rpx;
          margin-top: 20rpx;

          .container__body-form_section-body__item {
            width: 100%;
            display: flex;

            .container__body-form_section-body__item-content {
              display: grid;
              width: 100%;
              margin-right: 20rpx;

              &:last-child {
                margin-right: 0;
              }

              .container__body-form_section-body__item-content-desc {
                .container__body-form_section-body__item-content-desc__item {
                  font-weight: 350;
                  font-size: 26rpx;
                  color: #3E3E3E;
                  margin-bottom: 20rpx;

                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }

              ::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked {
                .checklist-text {
                  color: $hxk-primary-color;
                }

                .radio__inner {
                  border-color: $hxk-primary-color;

                  .radio__inner-icon {
                    background-color: $hxk-primary-color;
                  }
                }
              }
            }

          }
        }
      }

      ::v-deep .uni-data-checklist .checklist-group .checklist-box.is--button.is-checked {
        border-color: $hxk-primary-color !important;

        .checklist-text {
          color: $hxk-primary-color;
        }

        .radio__inner {
          border-color: $hxk-primary-color;

          .radio__inner-icon {
            background-color: $hxk-primary-color;
          }
        }
      }
    }


    .container__body-content {
      .container__body-content-section {
        background: #fff;
        padding: 20rpx;
        margin: 20rpx 0;

        .container__body-content-section-header {
          .container__body-content-section-header-label {
            display: flex;
            align-items: center;
            font-weight: 600;
            font-size: 28rpx;
            color: #181818;

            .container__body-content-section-header-label-image {
              width: 40rpx;
              height: 40rpx;
              margin-right: 20rpx;
            }
          }

          .container__body-content-section-header-content {
            padding: 20rpx;
            font-weight: 350;
            font-size: 30rpx;
            color: #AFAFAF;
            border-bottom: 1rpx solid #EBEBEB;
          }
        }

        .container__body-content-section-content {
          .container__body-content-section-content-form {
            padding: 0 20rpx;
          }

          ::v-deep .uni-data-checklist .checklist-group .checklist-box.is--button.is-checked {
            border-color: $hxk-primary-color !important;

            .checklist-text {
              color: $hxk-primary-color;
            }

            .radio__inner {
              border-color: $hxk-primary-color;

              .radio__inner-icon {
                background-color: $hxk-primary-color;
              }
            }
          }

          .container__body-content-section-content-button {
            .container__body-content-section-content-button-item {
              width: 691rpx;
              height: 82rpx;
              border-radius: 12rpx 12rpx 12rpx 12rpx;
              border: 1rpx solid #000000;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 28rpx;
            }
          }
        }
      }
    }
  }

  .container__footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140rpx;
    background-color: #FFFFFF;


    .container__footer__button {
      display: flex;
      justify-content: space-between;
      align-items: center;

      button {
        width: 311rpx;
        height: 73rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        border: 1rpx solid #BEBEBE;
        background-color: #fff;
        font-size: 30rpx;
        color: #333333;
        text-align: center;
        line-height: 73rpx;

        &.container__footer__button--submit {
          background-color: $hxk-primary-color;
          color: #fff;
          border: 1rpx solid $hxk-primary-color;
        }
      }
    }
  }
}
</style>
